<template>
	<view>
		<view class="header ">
			<view class="search-box u-f-jsb">
				<view class="u-f-ac">
					<image
						class="icon"
						src="/static/images/icon-search.png"
						mode="widthFix"
					></image>
					<input type="text" v-model="keyword" placeholder="DeviceName" confirm-type="search" @confirm="getDevices" />
				</view>
				<view @tap="getDevices">搜索</view>
			</view>
			<view class="bar u-f-ac">
				<view>序号</view>
				<view>DeviceName</view>
			</view>
		</view>

		<view class="list">
			<radio-group @change="handleRadioChange">
				<view class="item u-f-ac" v-for="(item, index) in devices" :key="index">
					<view>{{ index + 1 }}</view>
					<view class="u-f-jsb">
						<view>{{item.deviceName}}</view>
						<label>
							<radio color="#717CB2" :value="index" />
							<text></text>
						</label>
					</view>
				</view>
			</radio-group>
			<view style="margin: 30rpx;"><u-loadmore :status="status" /></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			devices: [],
			status: 'loadmore',
			page:1,
			keyword:''
		};
	},
	onLoad() {
		this.getDevices();
	},
	onReachBottom() {
		this.page++;
		this.getDevices();
	},
	methods: {
		handleRadioChange(e) {
			const index = e.detail.value;
			uni.$emit('choseDevice', this.devices[index]);
			uni.navigateBack();
		},
		getDevices() {
			this.status = 'loading';
			this.$http({
				url: this.$api.factoryUrl + 'getiotdevicepage',
				data: {
					rows:20,
					page:1,
					keyword:this.keyword
				}
			}).then(res => {
				this.status = 'loadmore';
				if(res.length<20) {
					this.status = 'nomore';
				}
				this.devices = [...this.devices, ...res];
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}
.header {
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 999;
	border-bottom: 1rpx solid #f5f5f5;
	background-color: #ffffff;

	.bar {
		padding: 30rpx;
		border-bottom: 1rpx solid #f6f6f6;
		border-top: 20rpx solid #f5f5f5;
		view {
			color: #999999;
		}

		> view:first-child {
			width: 80rpx;
			margin-right: 40rpx;
			text-align: center;
		}
	}
}
.search-box {
	padding: 20rpx 0 20rpx 28rpx;
	> view:first-child {
		background-color: #ebebeb;
		border-radius: 60rpx;
		flex: 1;
		padding: 20rpx;

		.icon {
			width: 46rpx;
			height: 46rpx;
			margin-right: 10rpx;
			filter: grayscale(100%);
		}
	}

	> view:last-child {
		width: 120rpx;
		text-align: center;
		font-size: 34rpx;
		color: #333333;
	}
}

.list {
	margin-top: 250rpx;
	background-color: #ffffff;

	.item {
		padding: 30rpx 0;
		margin: 0 30rpx;
		border-bottom: 1rpx solid #f3f3f3;

		view {
			color: #666666;
		}
		> view:first-child {
			width: 80rpx;
			text-align: center;
			margin-right: 40rpx;
		}
		> view:last-child {
			flex: 1;
		}
	}
}
</style>
